<template>
    <el-dialog :close-on-click-modal="false" :visible.sync="addVisible" width="80%" class="addAblityForm" :show-close='false'>
        <span slot="title" class="dialog-title">
		  	    添加检测项目
			    <el-button @click="closeAbility" size="mini" class="popupClose">关闭</el-button>
			</span>
        <div class="seachTip selectw100">
            <div class="inlineblock verticalmiddle infoitem">
                <div class="inlineblock verticalmiddle">检测项目</div>
                <div class="inlineblock verticalmiddle informationItem">
                    <!---->
                    <el-select @change="itemBeanListChange" v-model="searchItem " filterable placeholder="请选择" clearable size="mini">
                        <el-option v-for="item in itemBeanListAll" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>

                </div>
            </div>
            <div class="inlineblock basicRightDistanceA searchIcon">
                <el-button size="mini" @click="readitemBeanList">搜索</el-button>
            </div>
        </div>
        <div style="float:left;width:65%;height:calc(100% - 60px)">
            <div style="float:left;width:46%;height:100%">
                <el-table :data="abilityBeanListAll" style="width: 100%;height:100%" @selection-change="handleReceivedChange" class="tableCon CNAS"
                    size="mini">
                    <el-table-column width="50" type="selection"></el-table-column>
                    <el-table-column label="序号" width="45px">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column label="能力参数" prop="name" min-width="180px" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <img src="@/assets/img/CMA.png" alt="" v-if ="scope.row.cmaStatus == 1"  style="width:18px;vertical-align: middle;">
                        <img src="@/assets/img/CNAS.png" alt="" v-if ="scope.row.cnasStatus == 1" style="width:18px;vertical-align: middle;">
                        <span style="vertical-align: middle;">{{scope.row.name}}</span>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="tablemiddle">
                <div>
                    <i class="el-icon-arrow-right"  @click="changeReceived"></i>
                </div>
                <div>
                    <i class="el-icon-arrow-left" @click="changeUnclaim"></i>
                </div>
            </div>
            <div style="float:right;width:46%;height:100%">
                <el-table :data="abilityBeanList" @cell-click="clickAbility" highlight-current-row style="width: 100%;height:100%" class="tableCon CNAS"
                    size="mini" ref="abilityRef">
                    <el-table-column width="50" :render-header="renderHeader">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.checked" @change="(value) =>selectedAbility(value, scope.row)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="序号" min-width="45px">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column label="能力参数" prop="name" min-width="150px" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <img src="@/assets/img/CMA.png" alt="" v-if ="scope.row.cmaStatus == 1"  style="width:16px;vertical-align: middle;">
                        <img src="@/assets/img/CNAS.png" alt="" v-if ="scope.row.cnasStatus == 1" style="width:16px;vertical-align: middle;">
                        <span style="vertical-align: middle;">{{scope.row.name}}</span>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div style="width:32%;float:right;margin-left:10px;height:calc(100% - 60px);">
            <el-table :data="itemBeanList" v-if="reload" ref="itemRef" style="width: 100%;height:100%" class="tableCon" size="mini">
                <el-table-column width="50" fixed :render-header="renderHeaderItem">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.checked" @change="(value) =>selectedItem(value, scope.row)"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="序号" min-width="45px">
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column label="检测项目" prop="itemName" min-width="180px" show-overflow-tooltip>

                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
			    <el-button type="primary" @click="saveDetects" size="mini">确 定</el-button>
			    <el-button @click="closeAbility" size="mini">取 消</el-button>
			  </span>
    </el-dialog>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        data() {
            return {
                searchItem: "",
                itemBeanListAll: [],//所有的检测项目
                abilityBeanList: [], //选中的能力参数
                abilityBeanListAll: [], //所有的能力参数
                abilityInit: [], //接口获取的能力参数数据

                itemBeanList: [], //检测项目列表
                reload: true,
                multipleReceived: [], //勾选的能力参数
                changeFlag: false, //选中的能力参数变化的标志

                multipleSelections: [], //
                multipleSelection: [],
                selectItem: [], //选择的检测项目
                allChecked: false,
                allCheckedItem: false,

            }
        },
        computed: {
            ...mapState([]),
        },
        watch: {
            addVisible(val) {
                if (val) {
                    this.readitemBeanList()
                    this.readablityBeanList('')

                }
            },
            changeFlag(val) {
                if (this.abilityBeanList.length != 0) {
                    this.$refs.abilityRef.setCurrentRow(this.abilityBeanList[0])
                    this.clickAbility(this.abilityBeanList[0], { label: "序号" })


                } else {
                    this.itemBeanList = []
                }
            },
            abilityBeanList: {
                deep: true,
                handler(val, oldVal) {
                    var flag = 1;
                    if (this.abilityBeanList.length != 0) {
                        for (var i in this.abilityBeanList) {
                            if (this.abilityBeanList[i].checked) {
                                flag = flag * 1
                            } else {
                                flag = flag * 0
                            }
                        }
                        if (flag) {
                            this.allChecked = true;
                        } else {
                            this.allChecked = false;
                        }
                    }

                }
            }

        },
        props: ['newOrEdit', 'readItem', 'addVisible'],
        methods: {
            //	获取项目集合
            readitemBeanList() {
                this.$http({
                    method: 'post',
                    apiUrl: '/technology/readItemBeanList.htm',
                }).then(res => {
                    if (res.code === 0) {
                        this.itemBeanListAll = res.data;
                    }
                })
            },
            itemBeanListChange(val) {
                this.readablityBeanList(val)
            },
            //	获取能力参数集合
            readablityBeanList(val) {
                this.$http({
                    method: 'post',
                    apiUrl: '/technology/readDetectAndItemList.htm',
                    params: {
                        item: val,
                        subcontractor:this.readItem.subcontractor
                     },
                    isJson: false,
                }).then(res => {
                    if (res.code === 0) {
                        for (var i in res.data) {
                            this.$set(res.data[i], 'checked', false);
                            for (var j in res.data[i].itemBeanList) {
                                this.$set(res.data[i].itemBeanList[j], 'checked', false)
                            }
                        }
                        this.abilityBeanListAll = res.data;
                        this.abilityInit = JSON.parse(JSON.stringify(res.data))
                    }
                }, )
            },
            // 能力参数选中的数据
            handleReceivedChange(val) {
                this.multipleReceived = val;
            },
            // 从左边搜索到的能力参数向右边穿梭
            changeReceived() {
                if (this.multipleReceived.length != 0) {
                    for (var i in this.multipleReceived) {
                        // this.multipleReceived[i].checked = true;
                        for (var j in this.multipleReceived[i].itemBeanList) {
                            this.multipleReceived[i].itemBeanList[j].checked = true;
                        }
                    }
                    this.abilityBeanList = this.util.repeatData({ old: this.abilityBeanList, new: this.multipleReceived, unique: 'id' })
                    this.abilityBeanListAll = this.util.deleteArrSomeObj({ allArr: this.abilityBeanListAll, delArr: this.multipleReceived, unique: 'id' });
                    this.changeFlag = !this.changeFlag;
                    //重新给已选的能力参数排序
                    // this.abilityBeanList = this.util.deleteArrSomeObj({ allArr: this.abilityInit, delArr: this.abilityBeanListAll, unique: 'id' });

                }
            },
            // 从右边向左边
            changeUnclaim() {
                var arr = [];
                for (var i in this.abilityBeanList) {
                    if (this.abilityBeanList[i].checked) {
                        arr.push(this.abilityBeanList[i])

                    }
                }
                this.abilityBeanListAll = this.util.repeatData({ old: this.abilityBeanListAll, new: arr, unique: 'id' })
                this.abilityBeanList = this.util.deleteArrSomeObj({ allArr: this.abilityBeanList, delArr: arr, unique: 'id' });

                // 给选过去的数组重新排序 是原始数组 去除掉右边能力参数表的数据
                this.abilityBeanListAll = this.util.deleteArrSomeObj({ allArr: this.abilityInit, delArr: this.abilityBeanList, unique: 'id' });
                this.changeFlag = !this.changeFlag;
                for (var i in this.abilityBeanListAll) {
                    this.abilityBeanListAll[i].checked = false;
                }
                this.allChecked = false;
                // this.allCheckedItem = false;
            },

            // 点击能力参数
            clickAbility(row, column) {
                if (column.label == '序号' || column.label == '能力参数') {
                     console.log(this.abilityBeanList)
                    this.abilityBeanList.forEach((item, index) => {
                        if (item.id == row.id) {
                            console.log(row)
                            this.setRowIndex(row, index)
                        }
                    })
                }
            },
            setRowIndex(row, index) {
                this.itemBeanList = row.itemBeanList
                console.log(this.itemBeanList)
                // 切换到能力参数时 先把检测项目的全选清空，再遍历下面的检测项，如果下面的检测项全选，则
                this.allCheckedItem = false;
                this.reLoad();
                var flag = 1
                if (this.itemBeanList == undefined) {
                    flag = flag * 0
                } else {
                    if (this.itemBeanList.length == 0) {
                        flag = flag * 0
                    }
                    for (var i in this.itemBeanList) {
                        if (this.itemBeanList[i].checked) {
                            flag = flag * 1
                        } else {
                            flag = flag * 0
                        }
                    }
                }
                if (flag) {
                    this.allCheckedItem = true;
                } else {
                    this.allCheckedItem = false;
                }
            },
            // 渲染能力参数表头部
            renderHeader(h, { column, $index }) {
                var that = this;
                return h('el-checkbox', {//el-checkbox
                    on: {	//这是方法
                        change: (value) => {
                            that.allChecked = value
                            for (var i in that.abilityBeanList) {
                                that.abilityBeanList[i].checked = value
                                // for (var j in that.abilityBeanList[i].itemBeanList) {
                                //     that.abilityBeanList[i].itemBeanList[j].checked = value
                                // }
                            }
                            // that.allCheckedItem = value;
                        },
                    },
                    props: {
                        value: that.allChecked,
                    },
                })

            },
            // 渲染检测项目的表头
            renderHeaderItem(h, { column, $index }) {
                var that = this;
                return h('el-checkbox', {//el-checkbox
                    on: {	//这是方法
                        change: (value) => {
                            that.allCheckedItem = value
                            for (var i in that.itemBeanList) {
                                that.itemBeanList[i].checked = value
                            }
                            // 如果检测项目全选 对应的父能力参数页选中
                            // for (var i in that.abilityBeanList) {
                            //     if (that.abilityBeanList[i].id == that.itemBeanList[0].fRef) {
                            //         that.abilityBeanList[i].checked = value;
                            //     }
                            // }
                        },
                    },
                    props: {
                        value: that.allCheckedItem,
                    },
                })

            },
            // 勾选能力参数时的操作
            selectedAbility(val, row) {
                this.reLoad();
                // 选中能力参数，下面的检测项目全选
                // for (var i in row.itemBeanList) {
                //     row.itemBeanList[i].checked = val;
                // }
                // this.allCheckedItem = val;
                // 如果是全选中或者全不选，能力参数表头的页勾选或者取消勾选
                var flag = 1;
                for (var i in this.abilityBeanList) {
                    if (this.abilityBeanList[i].checked) {
                        flag = flag * 1
                    } else {
                        flag = flag * 0
                    }
                }
                if (flag) {
                    this.allChecked = true;
                } else {
                    this.allChecked = false;
                }


            },
            // 勾选检测项目的操作
            selectedItem(val, row) {
                // 如果是全选中或者全不选，能力参数表头的页勾选或者取消勾选
                var flag = 1;
                // var flag1 = 1;
                for (var i in this.itemBeanList) {
                    if (this.itemBeanList[i].checked) {
                        flag = flag * 1
                    } else {
                        flag = flag * 0
                    }
                    // 如果flag1最终为1，则对应得能力参数不选中
                    // if (!this.itemBeanList[i].checked) {
                    //     flag1 = flag1 * 1;
                    // } else {
                    //     flag1 = flag1 * 0;
                    // }

                }
                if (flag) {
                    this.allCheckedItem = true;

                } else {
                    this.allCheckedItem = false;
                }
                // 如果检测项目全选 对应的父能力参数页选中
                // for (var i in this.abilityBeanList) {
                //     if (this.abilityBeanList[i].id == this.itemBeanList[0].fRef) {
                //         if (flag) {
                //             this.abilityBeanList[i].checked = true;
                //         }
                //         if (flag1) {
                //             this.abilityBeanList[i].checked = false;
                //         }
                //     }
                // }
            },

            // 是否重新加载
            reLoad() {
                this.reload = false;
                this.$nextTick(() => {
                    this.reload = true;
                })
            },
            // 保存选中的能力参数和检测项
            saveDetects() {
                var tempArr = [];
                if (this.abilityBeanList.length == 0) {
                    this.$notify({
                        title: '警告',
                        message: '请选择能力参数!',
                        type: 'warning'
                    })
                } else {
                    for (var i in this.abilityBeanList) {
                        var obj = {};
                        obj.fRef = this.readItem.id;
                        obj.detectability = this.abilityBeanList[i].id;
                        obj.method = this.abilityBeanList[i].method;
                        obj.itemList = []
                        if (this.abilityBeanList[i].itemBeanList.length == 0) { //如果该条能力参数的检测项目为空,开始下次循环
                            continue;
                        }
                        for (var j in this.abilityBeanList[i].itemBeanList) {
                            if (this.abilityBeanList[i].itemBeanList[j].checked) {
                                obj.itemList.push(this.abilityBeanList[i].itemBeanList[j])
                            }
                        }
                        tempArr.push(obj)
                    }
                    this.$http({
                        method: 'post',
                        apiUrl: '/detection/addItemSetDetect.htm',
                        params: tempArr,
                        isJson: true,
                    }).then(res => {
                        if (res.code === 0) {
                            this.$notify({
                                titlt: '成功',
                                message: '保存成功！',
                                type: 'success'
                            })
                            this.closeAbility();
                            this.$parent.getItemSetInfos();
                            this.getNums();
                        }

                    })
                }
            },
            //关闭弹框
            closeAbility() {
                this.$emit("update:addVisible", false)
                this.searchItem = "";
                this.abilityBeanList = [];
                this.allChecked = false;
                this.allCheckedItem = false;
                this.itemBeanList = [];
            },

        }
    }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
    .addAblityForm .separaterow {
        margin-top: 10px;
    }

    .addAblityForm .informationItem {
        width: calc(100% - 80px);
        float: right;
    }

    .standardmanage .addAblityForm .el-dialog {
        height: 70%;
    }

    .standardmanage .addAblityForm .el-dialog .el-form-item {
        margin-bottom: 20px;
    }

    .standardmanage .addAblityForm .el-dialog .el-dialog__body {
        height: calc(100% - 85px);
        padding: 10px;
    }

    .standardmanage .addAblityForm .el-dialog .el-dialog__body .form {
        height: 60px;
    }

    .standardmanage .addAblityForm .el-dialog .el-dialog__body .ablityItem {
        height: 100%;
        padding: 0 20px;
    }

    .standardmanage .addAblityForm .el-dialog .el-dialog__footer {
        height: 45px;
        line-height: 45px;
        padding: 0 20px !important;
    }



    .addAblityForm .tableCon .el-table__fixed-body-wrapper,
    .addAblityForm .tableCon .el-table__body-wrapper {
        height: calc(100% - 46px);
    }

    .addAblityForm .tablemiddle {
        position: absolute;
        left: calc(30% - 15px);
        top: 36%;
        font-size: 30px;
        width: 10%;
        text-align: center;
    }

    .addAblityForm .tablemiddle i {
        cursor: pointer;
        font-size: 16px;
        color: #999;
    }

    .addAblityForm .el-icon-arrow-right,
    .addAblityForm .el-icon-arrow-left {
        border: 1px solid #dcdfe6;
        background-color: #f5f7fa;
        display: inline-block;
        width: 32px;
        height: 32px;
        line-height: 32px;
        border-radius: 50%;
    }
    .CNAS.el-table td, .CNAS .el-table__header-wrapper th, .CNAS .el-table__fixed-header-wrapper th{
       text-align: left !important;
    }

    /*.addAblityForm .el-icon-arrow-right::before,
    .addAblityForm .el-icon-arrow-left::before {
        color: #999;
    }*/
</style>
